// 財務狀況
import { chooseOptions } from '@/utils/common';
import { Col, Form, Input, InputNumber, Row, type FormInstance } from 'antd';

import AuthComponents from '@/components/AuthComponents';
import FormAuth from '@/components/FormAuth';
import Select from '@/components/NewSelect';
import { findByCodeList } from '@/services/login';
import { getOptions, numberToEnglish } from '@/utils';
import { useRequest } from 'ahooks';
import { type Gutter } from 'antd/es/grid/row';
import { getLocale, useIntl } from 'umi';

const StepThree: React.FC<{
  form: FormInstance<any>;
  gutter?: Gutter | [Gutter, Gutter];
  isCenter?: boolean;
  span?: number;
  required?: boolean;
}> = ({ gutter = [20, 0], form, required = true, span, isCenter }) => {
  const intl = useIntl();
  const { data } = useRequest(() => {
    return findByCodeList({
      code: 'apply30Record',
    });
  });
  const isEn = getLocale() == 'en-US';

  const { apply30Record } = data?.data || {};

  return (
    <>
      {/* 財務信息 */}
      {isCenter ? (
        <div className="info_right_form_sTitle">{intl.formatMessage({ id: 'center.base' })}</div>
      ) : (
        <div className="info_right_form_title">
          {intl.formatMessage(
            { id: 'center.write' },
            { label: intl.formatMessage({ id: 'center.financial_status' }).toLowerCase() },
          )}
        </div>
      )}
      <Row gutter={gutter}>
        <FormAuth
          label={intl.formatMessage({ id: 'home.va' })}
          name="brokenFlag"
          span={span || 12}
          rules={[{ required }]}
        >
          <Select
            options={chooseOptions}
            placeholder={intl.formatMessage({ id: 'home.va_placeholder' })}
          />
        </FormAuth>
        <FormAuth
          label={intl.formatMessage({ id: 'home.break' })}
          name="badDebtRecordFlag"
          span={span || 12}
          rules={[{ required }]}
        >
          <Select
            options={chooseOptions}
            placeholder={intl.formatMessage({ id: 'home.break_placeholder' })}
          />
        </FormAuth>
        <FormAuth
          label={intl.formatMessage({ id: 'home.private_loan' })}
          name="personalLoanFlag"
          span={span || 24}
          rules={[{ required }]}
        >
          <Select
            options={chooseOptions}
            placeholder={intl.formatMessage({ id: 'home.private_loan_placeholder' })}
          />
        </FormAuth>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) =>
            prevValues.personalLoanFlag !== curValues.personalLoanFlag
          }
        >
          {({ getFieldValue }) => {
            const personalLoanFlag = getFieldValue('personalLoanFlag');
            return personalLoanFlag == 1 ? (
              <>
                <FormAuth
                  span={span || 12}
                  label={intl.formatMessage({ id: 'home.debt_total' })}
                  name="totalRemainingLoan"
                  rules={[{ required }]}
                >
                  <InputNumber
                    controls={false}
                    maxLength={8}
                    placeholder={intl.formatMessage({ id: 'home.debt_total' })}
                  />
                </FormAuth>

                <FormAuth
                  label={intl.formatMessage({ id: 'home.total_pay' })}
                  name="loanRepayment"
                  span={span || 12}
                  rules={[{ required }]}
                >
                  <InputNumber
                    controls={false}
                    maxLength={8}
                    placeholder={intl.formatMessage({ id: 'home.total_pay' })}
                  />
                </FormAuth>
                <FormAuth
                  span={span || 12}
                  name="loanNums"
                  rules={[{ required }]}
                  label={intl.formatMessage({ id: 'home.debt_num' })}
                >
                  <InputNumber
                    onChange={(e: any) => {
                      form.setFieldValue('loanInfo', new Array(e).fill({}));
                    }}
                    max={5}
                    controls={false}
                    placeholder={intl.formatMessage({ id: 'home.debt_num' })}
                  />
                </FormAuth>
                <AuthComponents name="loanInfo">
                  <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, curValues) =>
                      prevValues.loanNums !== curValues.loanNums
                    }
                  >
                    {({ getFieldValue }) => {
                      const loanNums = getFieldValue('loanNums');
                      return loanNums > 0 ? (
                        <Form.List name="loanInfo">
                          {(fields) => (
                            <>
                              {fields.map(({ key, name }, index) => {
                                return (
                                  <Row
                                    key={key}
                                    style={{ margin: '0', width: '100%' }}
                                    gutter={[20, 0]}
                                  >
                                    <Col
                                      span={24}
                                      style={{ color: '#333', fontSize: 18, marginBottom: 10 }}
                                    >
                                      {intl.formatMessage(
                                        { id: 'home.pen_num' },
                                        { num: isEn ? numberToEnglish(index) : index + 1 },
                                      )}
                                    </Col>
                                    <Col span={span || 12}>
                                      <FormAuth
                                        label={intl.formatMessage({ id: 'home.institution_name' })}
                                        name={[name, 'name']}
                                        rules={[{ required }]}
                                      >
                                        <Input
                                          placeholder={intl.formatMessage({
                                            id: 'home.institution_name',
                                          })}
                                        />
                                      </FormAuth>
                                    </Col>
                                    <Col span={span || 12}>
                                      <FormAuth
                                        label={intl.formatMessage({
                                          id: 'home.institution_amount',
                                        })}
                                        name={[name, 'amount']}
                                        rules={[{ required }]}
                                      >
                                        <InputNumber
                                          controls={false}
                                          placeholder={intl.formatMessage({
                                            id: 'home.institution_amount',
                                          })}
                                          style={{ width: '100%' }}
                                          prefix="$"
                                        />
                                      </FormAuth>
                                    </Col>
                                    <Col span={span || 12}>
                                      <FormAuth
                                        label={intl.formatMessage({ id: 'center.rates' })}
                                        name={[name, 'rate']}
                                        rules={[{ required }]}
                                      >
                                        <InputNumber
                                          controls={false}
                                          suffix="%"
                                          placeholder={intl.formatMessage({
                                            id: 'center.rates',
                                          })}
                                          style={{ width: '100%' }}
                                        />
                                      </FormAuth>
                                    </Col>
                                    <Col span={span || 12}>
                                      <FormAuth
                                        rules={[{ required }]}
                                        label={intl.formatMessage({ id: 'home.institution_day' })}
                                        name={[name, 'lateTerm']}
                                      >
                                        <InputNumber
                                          controls={false}
                                          placeholder={intl.formatMessage({
                                            id: 'home.institution_day',
                                          })}
                                          style={{ width: '100%' }}
                                          prefix="$"
                                        />
                                      </FormAuth>
                                    </Col>
                                  </Row>
                                );
                              })}
                            </>
                          )}
                        </Form.List>
                      ) : null;
                    }}
                  </Form.Item>
                </AuthComponents>
              </>
            ) : null;
          }}
        </Form.Item>
        <FormAuth
          label={intl.formatMessage({ id: 'home.card' })}
          name="creditCardDebtFlag"
          span={span || 24}
          rules={[{ required }]}
        >
          <Select
            options={chooseOptions}
            placeholder={intl.formatMessage({ id: 'home.card_placeholder' })}
          />
        </FormAuth>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) =>
            prevValues.creditCardDebtFlag !== curValues.creditCardDebtFlag
          }
        >
          {({ getFieldValue }) => {
            const creditCardDebtFlag = getFieldValue('creditCardDebtFlag');
            return creditCardDebtFlag == 1 ? (
              <>
                <FormAuth
                  span={span || 12}
                  label={intl.formatMessage({ id: 'home.card_debt_total' })}
                  name="creditCardAmount"
                  rules={[{ required }]}
                >
                  <InputNumber
                    controls={false}
                    maxLength={9}
                    placeholder={intl.formatMessage({ id: 'home.card_debt_total' })}
                  />
                </FormAuth>

                <FormAuth
                  label={intl.formatMessage({ id: 'home.card_debt_number' })}
                  name="creditCardNum"
                  span={span || 12}
                  rules={[{ required }]}
                >
                  <InputNumber
                    maxLength={8}
                    controls={false}
                    placeholder={intl.formatMessage({ id: 'home.card_debt_number' })}
                  />
                </FormAuth>
              </>
            ) : null;
          }}
        </Form.Item>
        <FormAuth
          label={intl.formatMessage({ id: 'home.apply' })}
          name="apply30Flag"
          span={span || 24}
          rules={[{ required }]}
        >
          <Select
            options={chooseOptions}
            placeholder={intl.formatMessage({ id: 'home.apply_placeholder' })}
          />
        </FormAuth>

        <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) => prevValues.apply30Flag !== curValues.apply30Flag}
        >
          {({ getFieldValue }) => {
            const apply30Flag = getFieldValue('apply30Flag');
            return apply30Flag == 1 ? (
              <>
                <FormAuth
                  label={intl.formatMessage({ id: 'home.apply_record' })}
                  name="apply30Record"
                  span={span || 12}
                  rules={[{ required }]}
                >
                  <Select
                    style={{ width: '100%' }}
                    options={getOptions(apply30Record)}
                    placeholder={intl.formatMessage({ id: 'home.apply_record' })}
                  />
                </FormAuth>
              </>
            ) : null;
          }}
        </Form.Item>
      </Row>
    </>
  );
};

export default StepThree;
